const xhr = new XMLHttpRequest()
const goodsright = document.querySelector('.goods-right')
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        const {data: res} = JSON.parse(xhr.responseText)
        for (let i = 0; i < 8; i++) {
            const div = document.createElement('div')
            goodsright.appendChild(div)
            div.style.cssText = 'width: 234px;text-align:center;height: 300px;background-color:white;float:left;margin:0 0 14px 14px;'

            const img = document.createElement('img')
            img.src=res[i].product_picture

            img.style.cssText='margin-top:25px;width:160px'
            div.appendChild(img)

            const title = document.createElement('p')
            const titleText = document.createTextNode(res[i].product_name)
            title.style.cssText='font-size: 14px;\n' +
                '    font-weight: 400;\n' +
                '    color: #333;margin-top:10px'
            title.appendChild(titleText)
            div.appendChild(title)

            const desc = document.createElement('p')
            const descText = document.createTextNode(res[i].product_title)

            desc.appendChild(descText)
            div.appendChild(desc)
            desc.style.cssText='font-size: 12px;color: #b0b0b0;margin-top:5px'

            const price = document.createElement('p')
            const priceText = document.createTextNode(res[i].product_price+"元起")
            price.appendChild(priceText)
            div.appendChild(price)
            price.style.cssText='text-align:center;color: #ff6700;margin-top:5px'


            goodsright.appendChild(div)

            div.onclick = function () {
                localStorage.setItem('product_id', res[i].product_id)
                location.href = 'information.html'
            }

        }
    }
}
xhr.open('GET','http://43.138.138.11:1110/api/category/1',true)
xhr.send(null)